<template>
  <view
    :boxShadow="boxShadow"
    :class="{ 'MyCollapse1-box': type === 'box' }"
    class="MyCollapse"
  >
    <c-collapse
      :offsetContentHeight="15"
      :borderRadius="borderRadius"
      :open="open"
      :border="border"
      :boxShadow="boxShadow"
    >
      <template #title>
        <view class="collapse-title">
          <slot name="title" />
        </view>
      </template>

      <template #default>
        <view class="MyCollapse-content">
          <slot />
        </view>
      </template>
    </c-collapse>
  </view>
</template>

<script>
import cCollapse from './myuCollapse';

export default {
  name: 'collapseTable',

  props: {
    open: {
      type: Boolean,
      default: false,
    },

    // box 类似一个盒子  row 占一行类似cell
    type: {
      type: String,
      default: 'box',
    },

    borderRadius: {
      type: Boolean,
      default: true,
    },

    border: {
      type: Boolean,
      default: true,
    },

    boxShadow: {
      type: Boolean,
      default: true,
    },
  },

  components: {
    cCollapse,
  },
};
</script>

<style lang="scss" scoped>
.MyCollapse {
  font-size: 28upx;
  background-color: #fff;
  &.boxShadow {
    // box-shadow: 0px 2px 8px 0px rgba(215, 215, 215, 0.6);
  }

  &.MyCollapse1-box {
    margin: 0 30upx;
    border-radius: 16upx;
  }

  .collapse-title {
    border-radius: 16upx;
    display: flex;
    align-items: center;
    font-size: 24rpx;
    font-weight: 400;
    color: #333333;
    width: 100%;

    // border-bottom: 1px solid #dddddd;
  }

  .collapse-tag {
    color: #888;
    background: #eeeeee;
    border-radius: 20rpx;
    padding: 4rpx 16rpx;
    line-height: 34rpx;
    margin-right: 16rpx;

    &.fix1 {
      color: #333333;
      font-size: 24upx;
      display: inline-block;
    }

    &.tag-blue {
      color: #4c8fff;
      background: rgba(76, 143, 255, 0.1);
    }

    &.tag-orange {
      color: #e17d43;
      background: #e17d431f;
    }
  }

  .MyCollapse-content {
    // background-color: red;
  }

  .mbl {
    border-bottom: 1px solid #dddddd;
  }
  .pb {
    padding-bottom: 10upx;
  }

  .text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .text-ellipsis-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}
</style>
